<template>
  <div class="login-container">
    <div class="login-box">
      <div style="padding:40px;background-color: white;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1)">
        <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width:400px">
          <div style="margin-bottom:30px;margin-left:20px;font-size:24px;display: flex;justify-content: center;color:#5381bf;font-weight:bold;">欢迎注册</div>
          <el-form-item prop="username">
            <el-input size="large" v-model="data.form.username" placeholder="请输入账号" :prefix-icon="User" clearable/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password size="large" v-model="data.form.password" placeholder="请输入密码" :prefix-icon="Lock" clearable/>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input show-password size="large" v-model="data.form.confirmPassword" placeholder="请输入确认密码" :prefix-icon="Lock" clearable/>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input  size="large" v-model="data.form.phone" placeholder="请输入联系方式" :prefix-icon="Iphone" clearable/>
          </el-form-item>
          <el-form-item prop="transactionLocation">
            <el-input  size="large" v-model="data.form.transactionLocation" placeholder="请输入交易地址" :prefix-icon="Location" clearable/>
          </el-form-item>
          <div style="margin-bottom: 20px">
            <el-button @click="register" size="large" style="width: 100%" type="primary">注册</el-button>
          </div>
          <div style="text-align: right">
            已有账号？去<a style="color:#5381bf" href="/login">登录</a>
          </div>
        </el-form>

      </div>
    </div>
  </div>

</template>

<script setup>
import {
  User,
  Lock,
  Iphone,
  Location
} from '@element-plus/icons-vue';
import {reactive, ref} from "vue";
import request from "../utils/request";
import {ElMessage} from "element-plus";

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请再次确认密码'))
  } else if (value !== data.form.password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}


const data = reactive({
  form:{},
  rules:{
    password :[
      {required :true,message :'请输入密码',trigger:'blur'}
    ],
    username :[
      {required :true,message :'请输入用户名',trigger:'blur'}
    ],
    confirmPassword:[
      {validator:validatePass,trigger:'blur'}
    ],

  }
})

const register =()=>{
  formRef.value.validate((valid)=>{
    if(valid){
      request.post('/identity/registerBuyer',data.form).then(res =>{
        if(res.code === '200'){//注册成功
          localStorage.setItem('xm-pro-user',JSON.stringify(res.data))//将json对象转化为json字符串
          ElMessage.success('注册成功')
          setTimeout(()=>{
            location.href='/login'
          },500)
        }else{
          ElMessage.error(res.msg)
          console.log(res.msg)
        }
      })
    }
  })
}


const formRef = ref()
</script>
<style scoped>
.login-container{
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/Userlogin01.jpg");
  background-size: cover;

}

.login-box {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 45%;
  left: 35%;
  margin-top: -100px;
  display: flex;
  align-items: center;
}
</style>